<template>
  <div class="withdraw-records">
    <!-- <navbar :title="'提现记录'"></navbar> -->
    <div class="tabbar">
      <tabs v-model="active" color="#283C79" :swipe-threshold="5">
        <tab title="全部"></tab>
        <tab title="待审核"></tab>
        <tab title="待打款"></tab>
        <tab title="已打款"></tab>
        <tab title="未通过"></tab>
      </tabs>
    </div>

    <div class="records-list">
      <list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="record-item">
          <record-item>
            <div class="record-info" slot="content">
              <div class="status">
                <p>
                  <span>状态：</span>
                  <span>已完成</span>
                </p>
                <p>￥20000.00</p>
              </div>
              <div class="bank-info">
                <p class="bank">
                  <span>银行：</span>
                  <span>中国建设银行</span>
                </p>
                <p class="bank-junior">
                  <span>支行：</span>
                  <span>深圳支行</span>
                </p>
                <p class="name">
                  <span>开户名：</span>
                  <span>xxxx</span>
                </p>
                <p class="account">
                  <span>账号：</span>
                  <span>6331216798123156782</span>
                </p>
              </div>
            </div>
          </record-item>
        </div>
      </list>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs, List } from "vant";
import recordItem from "../components/record_item.vue";

export default {
  components: {
    recordItem,
    Tab,
    Tabs,
    List
  },
  data() {
    return {
      active: 0,
      loading: false,
      finished: false,
      pageNumber: 1,
      pageSize: 10,
      ordersList: [],
      stateList: {
        0: "待支付",
        1: "待发货",
        2: "已发货",
        3: "已完成",
        4: "上级缺货"
      }
    };
  },
  methods: {
    onLoad() {
      this.$http
        .post(this.$urls.YCDDLB, {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        })
        .then(res => {
          if (res.data.code == 200) {
            this.ordersList = this.ordersList.concat(res.data.data);

            this.pageNumber++;
            this.loading = false;
          } else if (res.data.code == 300) {
            this.loading = false;
            this.finished = true;
          }
        });
    }
  }
};
</script>

<style scoped>
.records-list {
  margin-top: 5px;
}

.record-item {
  margin-top: 1px;
  background-color: #fff;
}

.record-info {
  padding: 0 15px 10px 15px;
}
.record-info > .status {
  display: flex;
  justify-content: space-between;
}

.record-info .status {
  padding-bottom: 10px;
}

.record-info .status > p:first-child {
  display: flex;
}

.record-info .status > p:last-child {
  color: var(--money-up);
}

.record-info .bank-info {
  text-align: left;
  padding-top: 10px;
  border-top: 1px solid var(--line-between-color);
}
</style>